<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0,maximum-scale=1"
		/>
		<title>未来家园主题乐园</title>
		<link rel="stylesheet" href="./src/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="./src/lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./src/lib/css/reset.css" />
		<link rel="stylesheet" href="./src/css/header.min.css" />
		<link rel="stylesheet" href="./src/css/parkScenery.min.css" />
		<link rel="stylesheet" href="./src/lib/video/video-js.min.css" />
		<link rel="stylesheet" href="./src/lib/viewer/viewer.min.css" />
		<!-- bootstrap 图标库cdn -->
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"
		/>
	</head>
	<body>
		<header id="header"></header>
		<div id="banner">
			<img src="./src/images/banner_product.png" alt="风景" class="w-100" />
		</div>
		<div class="container_m">
			<div class="tabbar_c">
				<div class="tabbar_m">
					<div class="tabbar active" data-key="photo">相册</div>
					<div class="tabbar" data-key="video">视频</div>
					<!-- <div class="tabbar" data-key="vr">VR</div> -->
				</div>
			</div>
			<div class="photo container pr-0 pl-0">
				<div class="row">
					<div class="col-lg-2 col-xl-2 mb-4">
						<a
							class="btn-block w-100 showBox text-decoration-none text-reset"
							data-toggle="collapse"
							href="#photoCollapseExample"
							role="button"
							aria-expanded="false"
							aria-controls="photoCollapseExample"
						>
							<div class="d-flex justify-content-between align-items-center">
								<label style="width: 16px"></label>
								<label class="mb-0">类目</label>
								<i class="bi bi-chevron-down" style="font-size: 1rem"></i>
							</div>
						</a>
						<ul
							class="collapse list-group list-group-flush text-center list-type"
							id="photoCollapseExample"
						></ul>
					</div>
					<div class="col-lg-10 col-xl-10">
						<div class="photoBox row justify-content-start"></div>
						<div id="viewer"></div>
						<div id="photoPageBox"></div>
					</div>
				</div>
			</div>
			<div class="video container pr-0 pl-0">
				<div class="row">
					<div class="col-lg-2 col-xl-2 mb-4">
						<a
							class="btn-block w-100 showBox text-decoration-none text-reset"
							data-toggle="collapse"
							href="#videoCollapseExample"
							role="button"
							aria-expanded="false"
							aria-controls="videoCollapseExample"
						>
							<div class="d-flex justify-content-between align-items-center">
								<label style="width: 16px"></label>
								<label class="mb-0">类目</label>
								<i class="bi bi-chevron-down" style="font-size: 1rem"></i>
							</div>
						</a>
						<ul class="collapse list-group list-group-flush text-center list-type" id="videoCollapseExample"></ul>
					</div>
					<div class="col-lg-10 col-xl-10">
						<div id="videoBox" class="row justify-content-start"></div>
						<div id="videoPageBox"></div>
					</div>
				</div>
				<div
					class="modal fade"
					id="exampleModal"
					tabindex="-1"
					aria-labelledby="exampleModalLabel"
					aria-hidden="true"
				>
					<div class="modal-dialog modal-dialog-centered modal-lg">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="exampleModalLabel"></h5>
								<button
									type="button"
									class="close"
									data-dismiss="modal"
									aria-label="Close"
								>
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<video
									id="example_video"
									class="video-js vjs-default-skin vjs-big-play-centered"
								>
									<source
										src="https://1305846945.vod2.myqcloud.com/1776d6afvodcq1305846945/493a5396387702301847662197/7JDgQosvZCoA.mp4"
										type="video/mp4"
									/>
								</video>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer id="footer"></footer>
	</body>
	<script src="./src/lib/jquery-3.5.1.js"></script>
	<script src="./src/lib/bootstrap/js/bootstrap.min.js"></script>
	<script src="./src/lib/video/video.min.js"></script>
    <script src="./src/lib/video/video-hls.js"></script>
	<script src="./src/lib/viewer/viewer.min.js"></script>
	<script src="./src/lib/layui/layui.js"></script>
	<script src="./src/js/parkScenery.js" type="module"></script>
</html>
